<template>
  <div id="takeoutMain chuanb_dt">
    <a-row class="top" :gutter="24" style="margin:24px 12px">
      <a-col :span="17">
        <div class="gutter-box">
          <a-card title="船舶动态监控" style="height:574px;" :bordered="false">
            <template v-if="orginShipOnWork.length > 0">
              <slider ref="slider" :options="options">
                <slideritem v-for="(item,index) in shipOnWork" :key="index">
                  <a-row :gutter="[16,16]" style="width:100%;height:435px" class="work_hangc">
                    <a-col :span="12" v-for="(obj, key) in item" :key="key">
                      <a-card :body-style="{'padding':'14px 14px 8px 14px','height':'209px'}">
                        <a-row>
                          <a-col :span="18">
                            <div style="overflow:hidden">
                              <img
                                src="../../../static/images/ship_work.png"
                                alt
                                style="float:left;"
                              />
                              <a
                                @click="shipDetail(obj)"
                                style="float:left;margin:0 5px; line-height:18px; font-weight:bold; color: rgba(0, 0, 0, 0.85);"
                              >{{obj.name}}</a>
                              <a-tag
                                color="#FAAD14"
                                style="float:left; height:18px; line-height:19px; padding:0 5px;"
                              >{{obj.isSelfOperation === 1 ? '自营' : '租赁'}}</a-tag>
                              <a-tag
                                color="#52C41A"
                                style="float:left;height:18px; line-height:19px; padding:0 5px;max-width:65px"
                              >{{obj.loadingCapacity}}TEU</a-tag>
                            </div>
                            <div
                              style="text-align:left;margin-top:20px; font-weight:bold;  color: rgba(0, 0, 0, 0.85);"
                            >
                              航次：
                              <router-link
                                v-if="obj.voyageNumber"
                                :to="{path:`/shipCenter/voyageManagement/detail/${obj.voyageId}`}"
                                target="_blank"
                              >{{obj.voyageNumber}}</router-link>
                              <template v-else>暂无航次</template>
                            </div>
                          </a-col>
                          <a-col :span="6">
                            <div
                              :id="'liquidFill-oilSlide-'+ obj.liquidId"
                              style="width:100%;height:60px"
                            ></div>
                          </a-col>
                        </a-row>
                        <a-row>
                          <div class="scoll_ant-steps12">
                            <a-steps progress-dot size="small">
                              <a-step
                                v-for="(voyage,voyageIndex) in obj.shipVoyagePortList"
                                :key="voyageIndex"
                                :title="voyage.portName"
                                :status="voyage.status === 1 ? 'process': voyage.status === 2 ? 'finish' : 'wait'"
                                style
                              />
                            </a-steps>
                          </div>
                        </a-row>
                        <a-row style="padding:10px 0 6px 0;border-bottom:1px solid #EBEDF0">
                          <a-col
                            :span="12"
                            style="text-align:left; color: rgba(0, 0, 0, 0.85); line-height:18px;"
                          >
                            载重箱
                            <span style="color:#FAAD14;font-size:16px; margin-left:8px;">
                              {{obj.heavyQuantity}}
                              <font style=" font-size:12px">个 /</font>
                              {{obj.heavyTeuQuantity}}
                              <font
                                style=" font-size:12px"
                              >TEU</font>
                            </span>
                          </a-col>
                          <a-col
                            :span="12"
                            style="text-align:left; color: rgba(0, 0, 0, 0.85); line-height:18px;"
                          >
                            载空箱
                            <span style="color:#FAAD14;font-size:16px; margin-left:8px;">
                              {{obj.emptyQuantity}}
                              <font style=" font-size:12px">个 /</font>
                              {{obj.emptyTeuQuantity}}
                              <font
                                style=" font-size:12px"
                              >TEU</font>
                            </span>
                          </a-col>
                        </a-row>
                        <a-row style="padding:8px 0 0">
                          <a-col
                            :span="18"
                            style="text-align:left;margin-top:5px; color:rgba(0, 0, 0, 0.85);"
                          >
                            今日日志：
                            <span style="color:#FAAD14;font-size:16px">{{obj.logNum}}次</span>
                          </a-col>
                          <a-col :span="6">
                            <a-button
                              :disabled="obj.shipVoyagePortList.length > 0 ? false : true"
                              type="primary"
                              ghost
                              @click="notice(obj)"
                            >提醒</a-button>
                          </a-col>
                        </a-row>
                      </a-card>
                    </a-col>
                  </a-row>
                </slideritem>
              </slider>
            </template>
            <template v-else>
              <a-list :data-source="[]" />
            </template>
          </a-card>
        </div>
      </a-col>
      <a-col :span="7">
        <div class="gutter-box">
          <a-card title="油品库存" style="height:574px;" :bordered="false">
            <a-row :gutter="[16]">
              <a-col :span="24">
                <div id="liquidFill-oil-1" style="width:100%;height:260px"></div>
              </a-col>
            </a-row>
            <a-row :gutter="[16]" style="margin-top:12px;">
              <a-col :span="12">
                <div id="liquidFill-oil-2" style="width:100%;height:160px"></div>
              </a-col>
              <a-col :span="12">
                <div id="liquidFill-oil-3" style="width:100%;height:160px"></div>
              </a-col>
            </a-row>
          </a-card>
        </div>
      </a-col>
    </a-row>
    <a-row class="bottom" :gutter="24" :style="{ margin: '24px 12px 0 12px' }">
      <a-col :span="17">
        <div class="gutter-box">
          <a-card title="提醒" :bordered="false">
            <a-list
              item-layout="horizontal"
              :data-source="msgList"
              :style="msgList.length > 5 ? 'height: 361px; overflow-y: scroll;' : 'height: 361px; '"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <template v-if="item.type === 'VOYAGE_END'">
                  <a-button
                    slot="actions"
                    size="small"
                    type="primary"
                    :loading="remindVoyageEndStatus"
                    ghost
                    @click.stop="remindVoyageEnd(item.businessId)"
                  >好的</a-button>
                </template>
                <a-list-item-meta :description="item.sendDate">
                  <span slot="title">
                    <b>{{item.typeName}}</b>：
                    <a @click.stop="shipDetail(item)">{{item.shipName}}</a>
                    <a
                      v-if="item.type === 'VOYAGE_END'"
                      @click.stop="voyageDetail(item.businessId)"
                    >/ {{item.businessName}}</a>
                    {{item.content}}
                  </span>
                  <template>
                    <a-avatar v-if="item.type === 'INSURANCE'" slot="avatar" :src="bxIcon" />
                    <a-avatar v-else-if="item.type === 'MAINTENANCE'" slot="avatar" :src="byIcon" />
                    <a-avatar
                      v-else-if="item.type === 'ANNUAL_INSPECTION'"
                      slot="avatar"
                      :src="njIcon"
                    />
                    <a-avatar
                      v-else-if="item.type === 'EXPIRATION_CONTRACT'"
                      slot="avatar"
                      :src="htIcon"
                    />
                    <a-avatar
                      v-else-if="item.type === 'VOYAGE_END'"
                      slot="avatar"
                      :src="voyageEndIcon"
                    />
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </div>
      </a-col>
      <a-col :span="7">
        <div class="gutter-box" id="gutter-box">
          <a-card
            style="width:100%;height:453px"
            :tab-list="tabListNoTitle"
            :active-tab-key="noTitleKey"
            :bordered="false"
            @tabChange="key => onTabChange(key, 'noTitleKey')"
          >
            <div v-if="noTitleKey === 'countRank'">
              <div class="timeBox">
                <!-- <a-button type="link" ghost >本月</a-button>
                <a-button type="link" ghost @click="currentYear">全年</a-button>-->
                <span
                  style="cursor:pointer"
                  :class="countActive === 1 ? 'spanActive' : ''"
                  @click="currentMonth"
                >本月</span>
                <span
                  style="margin:0 6px;cursor:pointer"
                  :class="countActive === 2 ? 'spanActive' : ''"
                  @click="currentYear"
                >全年</span>
                <a-range-picker
                  style="width:175px"
                  format="YYYY-MM"
                  :value="value"
                  :mode="mode2"
                  @panelChange="handlePanelChange"
                  @change="handleChange"
                />
              </div>
              <div class="rankBody" v-if="countRankData.length > 0">
                <p class="ranking" v-for="(v, i) in countRankData" :key="i">
                  <span class="numberStyle">
                    <img v-if="i < 3" :src="nosPic[i]" />
                    <template v-else>
                      <span>{{i+1}}</span>
                    </template>
                  </span>
                  <span class="numberText">{{v.name}}</span>
                  <span class="numberPer">
                    <span
                      :style="{'display': 'inline-block', height: '22px', 'background': 'rgb(58, 161, 255)', 'width': Math.floor(v.num / countRankData[0].num *100) + '%' }"
                    ></span>
                  </span>
                  <span class="numberDesc">{{v.num}} 航次</span>
                </p>
              </div>
              <a-empty v-else />
            </div>
            <div v-else-if="noTitleKey === 'timesRank'">
              <div class="timeBox">
                <!-- <a-button type="link" ghost @click="currentMonth2">本月</a-button>
                <a-button type="link" ghost @click="currentYear2">全年</a-button>-->
                <span
                  style="cursor:pointer"
                  :class="timeActive === 1 ? 'spanActive' : ''"
                  @click="currentMonth2"
                >本月</span>
                <span
                  style="margin:0 6px;cursor:pointer"
                  :class="timeActive === 2 ? 'spanActive' : ''"
                  @click="currentYear2"
                >全年</span>
                <a-range-picker
                  style="width:175px"
                  format="YYYY-MM"
                  :value="value2"
                  :mode="mode2"
                  @panelChange="handlePanelChange2"
                  @change="handleChange2"
                />
              </div>
              <div class="rankBody" v-if="timeRankData.length > 0">
                <p class="ranking" v-for="(v, i) in timeRankData" :key="i">
                  <span class="numberStyle">
                    <img v-if="i < 3" :src="nosPic[i]" />
                    <template v-else>
                      <span>{{i+1}}</span>
                    </template>
                  </span>
                  <span class="numberText">{{v.name}}</span>
                  <span class="numberPer">
                    <span
                      :style="{'display': 'inline-block', height: '22px', 'background': 'rgb(58, 161, 255)', 'width': Math.floor(v.num / timeRankData[0].num *100) + '%' }"
                    ></span>
                  </span>
                  <span class="numberDesc">{{v.num}} 天</span>
                </p>
              </div>
              <a-empty v-else />
            </div>
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import echartsLiquidfill from 'echarts-liquidfill' // echarts水滴球
import moment from 'moment'
import {
  getShipBench,
  getShipBenchBanking,
  remindReportLog,
  readPlatformMessage
} from '@/api/shipCenter'
import shipIcon from '@/../static/images/voyage-icon.png'
import byIcon from '@/../static/images/by.png'
import bxIcon from '@/../static/images/bx.png'
import njIcon from '@/../static/images/nj.png'
import htIcon from '@/../static/images/het.png'
import voyageEndIcon from '@/../static/images/voyageEnd.png'
import { slider, slideritem } from 'vue-concise-slider'
import no1 from '@/../static/images/no1.png'
import no2 from '@/../static/images/no2.png'
import no3 from '@/../static/images/no3.png'
const nosPic = [no1, no2, no3]

export default {
  data () {
    return {
      tabListNoTitle: [
        {
          key: 'countRank',
          tab: '航次排名'
        },
        {
          key: 'timesRank',
          tab: '航行时间排名'
        }
      ],
      noTitleKey: 'countRank',
      msgList: [],
      shipOnWork: [],
      orginShipOnWork: [],
      voyageEndIcon,
      shipIcon,
      byIcon,
      bxIcon,
      njIcon,
      htIcon,
      options: {
        pagination: true,
        // autoplay: 5000, // 自动滚动[ms]
        loop: true, // 是否循环滚动
        thresholdDistance: 100, // 滑动距离阈值判定
        thresholdTime: 300, // 滑动时间阈值判定
        speed: 300 // 滑动速度
      },
      nosPic,
      value: [],
      value2: [],
      mode2: ['month', 'month'],
      countRankData: [],
      timeRankData: [],
      countActive: 1,
      timeActive: 1,
      btnControl: {},
      remindVoyageEndStatus: false
    }
  },
  components: {
    slider,
    slideritem
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.shipBench({})
    let currentMonth = this.getMonthStartAndEnd(0)
    setTimeout(() => {
      this.shipRank(
        {
          searchType: '1',
          startDate: currentMonth[0],
          endDate: currentMonth[1]
        },
        1
      )
    }, 1)
    setTimeout(() => {
      this.shipRank(
        {
          searchType: '2',
          startDate: currentMonth[0],
          endDate: currentMonth[1]
        },
        2
      )
    }, 1)
    this.value = [moment(currentMonth[0]), moment(currentMonth[1])]
    this.value2 = [moment(currentMonth[0]), moment(currentMonth[1])]
  },
  methods: {
    remindVoyageEnd (e) {
      this.readPlatformMessageRequest({
        type: 'VOYAGE_END',
        businessId: e
      })
    },
    readPlatformMessageRequest (e) {
      this.remindVoyageEndStatus = true
      readPlatformMessage(e).then(res => {
        this.$message.success('操作成功')
        this.shipBench({})
        setTimeout(() => {
          this.remindVoyageEndStatus = false
        }, 800)
      }).catch(() => {
        this.remindVoyageEndStatus = false
      })
    },
    remindReport (e) {
      let _this = this
      remindReportLog(e)
        .then(res => {
          if (res.code === 0) {
            _this.$message.success('提醒成功！')
          }
        })
        .catch(rsp => {})
    },
    onTabChange (key, type) {
      this[type] = key
    },
    shipBench (e) {
      let _this = this
      getShipBench(e)
        .then(res => {
          let resData = res.data
          _this.msgList = resData.shipBenchMessageList
          _this.orginShipOnWork = resData.shipBenchShipList
          // // console.log(resData)
          let shipOnWork = []
          resData.shipBenchShipList.forEach((v, k) => {
            v.liquidId = k
            _this.$nextTick(() => {
              _this.liquidFill2(
                k,
                resData.shipBenchShipList[k].remainingOil,
                1
              )
            })
          })
          for (let j = 0; j < resData.shipBenchShipList.length; j += 4) {
            shipOnWork.push(resData.shipBenchShipList.slice(j, j + 4))
          }
          if (shipOnWork.length > 1) {
            this.options.loop = true
          }
          _this.shipOnWork = shipOnWork
          _this.liquidFill(
            '-oil-1',
            resData.shipBenchOil.dieselOilTotal,
            1,
            '油库柴油量（吨）'
          )
          _this.liquidFill(
            '-oil-2',
            resData.shipBenchOil.lubricatingOilTotal,
            0,
            '润滑油量（桶）'
          )
          _this.liquidFill(
            '-oil-3',
            resData.shipBenchOil.hydraulicFluidTotal,
            0,
            '液压油量（桶）'
          )
        })
        .catch(rs => {})
    },
    shipRank (e, type) {
      getShipBenchBanking(e)
        .then(res => {
          if (type === 1) {
            this.countRankData = res.data
          } else {
            this.timeRankData = res.data
          }
          // // console.log(res)
        })
        .catch(rs => {})
    },
    liquidFill (className, res, type, text) {
      let liquid = this.$echarts.init(
        document.getElementById('liquidFill' + className)
      )
      let result
      if (type === 1) {
        if (res >= 30) {
          result = 0.5
        } else {
          result = 0.2
        }
      } else {
        if (res >= 10) {
          result = 0.5
        } else {
          result = 0.2
        }
      }

      liquid.setOption({
        series: [
          {
            type: 'liquidFill',
            data: [result],
            radius: '95%',
            backgroundStyle: {
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 0
            },
            itemStyle: {
              normal: {
                shadowBlur: 0
              }
            },
            outline: {
              show: true, // 是否显示轮廓 布尔值
              borderDistance: 5, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: result === 0.5 ? '#1890FF' : '#f5222d', // 边框的颜色
                borderWidth: 2 // 边框的宽度
              }
            },
            color: result === 0.5 ? ['#1890FF'] : ['#f5222d'],
            label: {
              position: ['50%', '50%'],
              formatter: function (param) {
                return `${res}\n${text}`
              },
              fontSize: 14,
              color: '#666'
            }
          }
        ]
      })
    },
    liquidFill2 (className, res, type, text) {
      let liquid = this.$echarts.init(
        document.getElementById('liquidFill-oilSlide-' + className)
      )
      let result
      if (type === 1) {
        if (res >= 30) {
          result = 0.5
        } else {
          result = 0.2
        }
      } else {
        if (res >= 10) {
          result = 0.5
        } else {
          result = 0.2
        }
      }
      liquid.setOption({
        series: [
          {
            type: 'liquidFill',
            data: [result],
            radius: '95%',
            backgroundStyle: {
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 0
            },
            itemStyle: {
              normal: {
                shadowBlur: 0
              }
            },
            outline: {
              show: true, // 是否显示轮廓 布尔值
              borderDistance: 3, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: result === 0.5 ? '#1890FF' : '#f5222d', // 边框的颜色
                borderWidth: 1 // 边框的宽度
              }
            },
            color: result === 0.5 ? ['#1890FF'] : ['#f5222d'],
            label: {
              position: ['50%', '50%'],
              formatter: function (param) {
                return `${res}\n燃油(t)`
              },
              fontSize: 10,
              fontWeight: 'normal',
              color: '#666'
            }
          }
        ]
      })
    },
    shipDetail (e) {
      let id = e.id || e.shipId
      window.open(`/shipCenter/shipManagement/detail/${id}`, '_blank')
    },
    voyageDetail (e) {
      window.open(`/shipCenter/voyageManagement/detail/${e}`, '_blank')
    },
    notice (e) {
      if (!this.btnControl.remind) {
        this.$message.error('您无此权限！')
        return false
      }
      this.remindReport({ id: e.voyageId })
    },
    // 获得相对当月AddMonthCount个月的起止日期,AddMonthCount为0 代表当月 为-1代表上一个月 为1代表下一个月 以此类推
    getMonthStartAndEnd (AddMonthCount) {
      // 起止日期数组
      var startStop = []
      // 获取当前时间
      var currentDate = new Date()
      var month = currentDate.getMonth() + AddMonthCount
      if (month < 0) {
        var n = parseInt(-month / 12)
        month += n * 12
        currentDate.setFullYear(currentDate.getFullYear() - n)
      }
      currentDate = new Date(currentDate.setMonth(month))
      // 获得当前月份0-11
      var currentMonth = currentDate.getMonth()
      // 获得当前年份4位年
      var currentYear = currentDate.getFullYear()
      // 获得上一个月的第一天
      var currentMonthFirstDay = new Date(currentYear, currentMonth, 1)
      // 获得上一月的最后一天
      var currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0)
      // 添加至数组
      startStop.push(this.getDateStr(currentMonthFirstDay))
      startStop.push(this.getDateStr(currentMonthLastDay))
      // 返回
      return startStop
    },
    // 获取当前日期yy-mm-dd,date 为时间对象
    getDateStr (date) {
      var year = ''
      var month = ''
      // var day = ''
      var now = date
      year = '' + now.getFullYear()
      if (now.getMonth() + 1 < 10) {
        month = '0' + (now.getMonth() + 1)
      } else {
        month = '' + (now.getMonth() + 1)
      }
      // if (now.getDate() < 10) {
      //   day = '0' + now.getDate()
      // } else {
      //   day = '' + now.getDate()
      // }
      // return year + '-' + month + '-' + day
      return year + '-' + month
    },
    // 全年
    getFullYear () {
      let fullYear = []
      fullYear.push(`${new Date().getFullYear()}-01`)
      fullYear.push(`${new Date().getFullYear()}-12`)
      return fullYear
    },
    handleChange (value) {
      this.countActive = 0
      this.value = value
    },
    handlePanelChange (value, mode) {
      this.countActive = 0
      this.value = value
      this.mode2 = [
        mode[0] === 'date' ? 'month' : mode[0],
        mode[1] === 'date' ? 'month' : mode[1]
      ]
      setTimeout(() => {
        this.shipRank(
          {
            searchType: '1',
            startDate: moment(value[0]).format('YYYY-MM'),
            endDate: moment(value[1]).format('YYYY-MM')
          },
          1
        )
      }, 1)
    },
    handleChange2 (value) {
      this.timeActive = 0
      this.value2 = value
    },
    handlePanelChange2 (value, mode) {
      this.timeActive = 0
      this.value2 = value
      this.mode2 = [
        mode[0] === 'date' ? 'month' : mode[0],
        mode[1] === 'date' ? 'month' : mode[1]
      ]
      setTimeout(() => {
        this.shipRank(
          {
            searchType: '2',
            startDate: moment(value[0]).format('YYYY-MM'),
            endDate: moment(value[1]).format('YYYY-MM')
          },
          2
        )
      }, 1)
    },
    currentMonth () {
      this.countActive = 1
      let thisMonth = this.getMonthStartAndEnd(0)
      this.value = [moment(thisMonth[0]), moment(thisMonth[1])]
      setTimeout(() => {
        this.shipRank(
          {
            searchType: '1',
            startDate: thisMonth[0],
            endDate: thisMonth[1]
          },
          1
        )
      }, 1)
    },
    currentYear () {
      this.countActive = 2
      let thisYear = this.getFullYear()
      this.value = [moment(thisYear[0]), moment(thisYear[1])]
      setTimeout(() => {
        this.shipRank(
          {
            searchType: '1',
            startDate: thisYear[0],
            endDate: thisYear[1]
          },
          1
        )
      }, 1)
    },
    currentMonth2 () {
      this.timeActive = 1
      let thisMonth = this.getMonthStartAndEnd(0)
      this.value2 = [moment(thisMonth[0]), moment(thisMonth[1])]
      setTimeout(() => {
        this.shipRank(
          {
            searchType: '2',
            startDate: thisMonth[0],
            endDate: thisMonth[1]
          },
          2
        )
      }, 1)
    },
    currentYear2 () {
      this.timeActive = 2
      let thisYear = this.getFullYear()
      this.value2 = [moment(thisYear[0]), moment(thisYear[1])]
      setTimeout(() => {
        this.shipRank(
          {
            searchType: '2',
            startDate: thisYear[0],
            endDate: thisYear[1]
          },
          2
        )
      }, 1)
    }
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  .top {
    .gutter-box {
      background: #fff;
      min-height: 400px;
    }
  }
  .bottom {
    .gutter-box {
      background: #fff;
      min-height: 270px;
    }
  }
}
</style>
<style lang="less" scoped>
.rankBody {
  height: 320px;
  overflow: auto;
  .ranking {
    min-width: 350px;
    margin: 5px 0 15px 0;
    overflow: hidden;
    .numberStyle {
      display: block;
      float: left;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;
    }

    .numberText {
      display: block;
      float: left;
      width: 80px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
    }

    .numberPer {
      display: block;
      float: left;
      width: 45%;
      height: 22px;
      padding: 4px 0;
    }

    .numberDesc {
      display: block;
      float: left;
      text-indent: 5px;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
<style lang="less">
// steps
.scoll_ant-steps12 {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  height: 50px;
  padding: 5px 0 0px 0;
}
.scoll_ant-steps12::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #f2f2f2;
}
.scoll_ant-steps12::-webkit-scrollbar {
  height: 4px; /*设置滚动条样式*/
  background-color: #fff;
}
.scoll_ant-steps12::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c1c1c1;
}
// pagination
.slider-container {
  padding-bottom: 50px !important;
}
.swiper-container-horizontal > .slider-pagination-bullets {
  bottom: 0 !important;
}
.swiper-container-horizontal .slider-pagination-bullet-active,
.swiper-container-vertical .slider-pagination-bullet-active {
  background: #2496ff none repeat scroll 0 0 !important;
}
.timeBox {
  margin-bottom: 10px;
}
.timeBox span.spanActive {
  color: #1890ff;
}

//.work_hangc .ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot,.work_hangc .ant-steps-dot.ant-steps-small .ant-steps-item:first-child .ant-steps-icon-dot{left: -26px;}
.work_hangc .ant-steps-dot .ant-steps-item-icon,
.ant-steps-dot.ant-steps-small .ant-steps-item-icon {
  margin-left: -2px;
}
.work_hangc .ant-steps-dot .ant-steps-item-content,
.ant-steps-dot.ant-steps-small .ant-steps-item-content .ant-steps-item-title {
  width: 108px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.work_hangc .ant-steps-dot .ant-steps-item-tail,
.ant-steps-dot.ant-steps-small .ant-steps-item-tail {
  width: 138px;
}
.work_hangc .ant-steps-item-container {
  width: 114px;
  margin: 0 0 0 23px;
}
.work_hangc .ant-steps-item {
  width: 283px;
}
</style>
<style lang="less" scoped>
#gutter-box {
  /deep/ .ant-card-head {
    padding: 0;
    border-bottom: 0;
    /deep/ .ant-tabs-bar {
      margin: 0 !important;
      padding: 0 24px !important;
      border-bottom: 1px solid #e8e8e8 !important;
    }
  }
}
</style>
